<template>
  <div>
    <el-button type="primary" @click="toadd()">添加</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form ref="form" :model="add" label-width="100px">
        <el-form-item label="接口类型">
          <el-select v-model="add.interfaceType" placeholder="请选择">
            <el-option label="主键查询" value="主键查询" />
            <el-option label="分页查询" value="分页查询" />
            <el-option label="列表查询" value="列表查询" />
            <el-option label="递归查询" value="递归查询" />
            <el-option label="新增" value="新增" />
            <el-option label="批量新增" value="批量新增" />
            <el-option label="更新" value="更新" />
            <el-option label="主键更新" value="主键更新" />
            <el-option label="删除" value="删除" />
            <el-option label="主子查询" value="主子查询" />
            <el-option label="主子新增" value="主子新增" />
            <el-option label="主增子更" value="主增子更" />

          </el-select>
        </el-form-item>

        <el-form-item label="接口编号">
          <el-input v-model="add.interfaceNo" placeholder="接口编号" />
        </el-form-item>

        <el-form-item label="接口名称">
          <el-input v-model="add.interfaceName" placeholder="接口名称" />
        </el-form-item>

        <el-form-item label="类别">
          <el-input v-model="add.interfaceTag" />
        </el-form-item>

        <el-form-item label="表/视图(多个用';'分割)">
          <el-input v-model="add.tableName" placeholder="表/视图" />
        </el-form-item>

        <el-form-item label="排序字段">
          <el-input v-model="add.authMode" placeholder="排序字段" />
        </el-form-item>

        <el-form-item label="范围查询字段(多个用';'分割)">
          <el-input v-model="add.createTime" placeholder="比较查询字段(多个用';'分割)" />
        </el-form-item>

        <el-form-item label="模糊查询字段(多个用';'分割)">
          <el-input v-model="add.pkColumn" placeholder="比较查询字段(多个用';'分割)" />
        </el-form-item>

        <el-form-item label="主键(多个用';'分割)">
          <el-input v-model="add.subPkColumn" placeholder="主键" />
        </el-form-item>

        <el-form-item label="子表/视图(多个用';'分割)">
          <el-input v-model="add.subTableName" placeholder="子表/视图" />
        </el-form-item>

        <el-form-item label="子表主键(多个用';'分割)">
          <el-input v-model="add.interfaceOrder" placeholder="主键" />
        </el-form-item>

        <el-form-item label="子表外键 (多个用';'分割)">
          <el-input v-model="add.subFkColumn" placeholder="主键" />
        </el-form-item>

        <el-form-item label="验证方式">
          <el-radio-group v-model="add.likeColumns6">
            <el-radio label="验证" />
            <el-radio label="不验证" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="列表数量">
          <el-input v-model="add.createUser" placeholder="列表数量" />
        </el-form-item>
        <el-form-item label="自定义类型">
          <el-radio-group v-model="add.updateUser">
            <el-radio label="忽略" />
            <el-radio label="追加主" />
            <el-radio label="替换主" />
            <el-radio label="追加从" />
            <el-radio label="替换从" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自定义sql">
          <el-input v-model="add.sqlType" type="textarea" placeholder="`自定义sql`" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="infoadd()">确 定</el-button>
      </span>
    </el-dialog>
    <el-button type="primary" @click="delete1()">删除</el-button>
    <el-button type="primary" @click="toupdate()">修改</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column type="index" width="50" />
      <el-table-column prop="interfaceNo" label="服务编号" />
      <el-table-column prop="interfaceName" label="服务名称" />
      <el-table-column prop="interfaceType" label="类型" />
      <el-table-column prop="interfaceTag" label="类别" />
      <el-table-column prop="time" label="连接地址" />
    </el-table>
    <el-pagination
      background
      :current-page="form.pageNum"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      panduan: '',
      form: {
        pageNum: 1,
        pageSize: 3,
        name: ''
      },
      add: {},
      total: 0,
      ids: []

    }
  },
  created() {
    this.list()
  },
  methods: {
    list() {
      this.axios.post('http://localhost:9999/system-management/sysInterfaceInfo/list', this.form).then((res) => {
        this.tableData = res.data.list
        this.form.pageNum = res.data.pageNum
        this.form.pageSize = res.data.pageSize
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      this.form.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.list()
    },
    handleSelectionChange(val) {
      this.ids = val
    },
    toupdate() {
      // console.log(this.copy[0])
      if (this.ids.length > 1) {
        alert('只允许选择一条数据')
      } else {
        // eslint-disable-next-line eqeqeq
        if (this.ids.length == 0) {
          alert('请选择一条数据')
          return
        }
        this.handleEdit(this.ids[0])
      }
    },
    delete1() {
      var ids = this.ids.map((row) => row.interfaceNo).join(',')
      if (this.ids.length > 0) {
        if (confirm('是否删除?')) {
          this.axios.get('http://localhost:9999/system-management/sysInterfaceInfo/delete?ids=' + ids).then((ps) => {
            if (ps) {
              alert('删除成功')
              this.list()
            }
          })
        }
      } else {
        alert('请选择要删除的数据')
      }
    },
    toadd() {
      this.dialogVisible = true
      this.panduan = 'tj'
      this.add = {}
    },

    infoadd() {
      // eslint-disable-next-line eqeqeq
      if (this.panduan == 'tj') {
        this.axios.post('http://localhost:9999/system-management/sysInterfaceInfo/add', this.add).then((add) => {
          if (add) {
            alert('添加成功')
            this.dialogVisible = false
            this.list()
          }
        })
        // eslint-disable-next-line eqeqeq
      } else if (this.panduan == 'xg') {
        console.log(this.add)
        this.axios.post('http://localhost:9999/system-management/sysInterfaceInfo/update', this.add).then((update) => {
          if (update) {
            alert('修改成功')
            this.dialogVisible = false
            this.list()
          }
        })
      }
    },
    handleEdit(row) {
      console.log(row)
      this.panduan = 'xg'
      this.dialogVisible = true
      this.add = row
      // this.add.interfaceNo = row.interfaceNo
      // this.add.interfaceName = row.interfaceName
      // this.add.interfaceType = row.interfaceType
      // this.add.interfaceTag = row.interfaceTag
      // this.add.authMode = row.authMode
      // this.add.tableName = row.tableName
      // this.add.pkColumn = row.pkColumn
      // this.add.subPkColumn = row.subPkColumn
      //
      // this.add.authMode = row.authMode
      // this.add.tableName = row.tableName
      // this.add.pkColumn = row.pkColumn
      //
      // this.add.columnList = row.columnList
      // this.add.likeColumns = row.likeColumns
      // this.add.createTime = row.createTime
      // this.add.updateTime = row.updateTime
      //
      // this.add.subTableName = row.subTableName
      // this.add.createUser = row.createUser
      // this.add.interfaceOrder = row.interfaceOrder
      // this.add.subFkColumn = row.subFkColumn
      //
      // this.add.isIncludMyself = row.isIncludMyself
      // this.add.orderType = row.orderType
      // this.add.listNum = row.listNum
      //
      // this.add.updateUser = row.updateUser
      // this.add.compareColumn = row.compareColumn
      // this.add.userDefinedSql = row.userDefinedSql
      // this.add.sqlType = row.sqlType
    },
    onSubmit() {
      console.log('submit!')
      this.list()
    }
  }
}
</script>

<style scoped>

</style>

